<template>
  <div>
    <p>绑定的值(props):{{ props.mVal }}</p>
    <button @click="editmValProps">修改props的值</button>
    <p @click="mval++">绑定的值(props):{{ mval }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps(['mVal']);
const emit = defineEmits(['updata:mVal']);

const editmValProps = () => {
  // 在子组件无法直接修改Props传过来的值，
  // props.mVal = 200 // 无法为“mVal”赋值，因为它是只读属性。

   // 但是我可以把需要修改的值，使用emit事件传回父组件，在父组件中实现修改
  emit('updata:mVal', 200);
};
const mval = ref(props.mVal);
</script>
